<template>
    <box x="0" y="0" note="小地图">
        <img src="res/ui/mapBg.png" @click="openMap()"></img>
        <img src="res/ui/map.jpg" width="45" height="45" x="7" y="13" radius="22.5"></img>
        <txt :text="mapName" x="62" y="36" size="16" color="#ffffff"></txt>
        <box x="35" y="32" filter="#FF0000" note="上色">
            <img src="res/ui/colorLight.png" width="5" height="5" radius="3"></img>
        </box>
    </box>
    <box x="5" y="100" note="左侧按钮">
        <img :src="leftBtnRes" @click="leftBtnClick()"></img>
        <box :visible="leftBtnVisible" y="65" note="展开与收缩">
            <tpl src="tpl/components/button.tpl" icon="res/ui/btnActivity.png" @click="openTeam(123)"></tpl>
            <tpl src="tpl/components/button.tpl" y="65" icon="res/ui/btnShop.png" @click="openTeam(123)"></tpl>
            <tpl src="tpl/components/button.tpl" y="130" icon="res/ui/btnRank.png" @click="openTeam(123)"></tpl>
            <tpl src="tpl/components/button.tpl" y="195" icon="res/ui/btnAchieve.png" @click="openTeam(123)"></tpl>
        </box>
    </box>
    <box x="-456" y="0" note="角色与英雄头像">
        <img src="res/ui/heroBg.png" @click="openHero()">
            <img src="res/ui/avatarHero.png" width="45" height="45" x="36" y="36"></img>
            <img src="res/ui/blood.png" x="110" y="29" width="80"></img>
            <img src="res/ui/mana.png" x="95" y="44" width="60"></img>
            <img src="res/ui/exp.png" x="95" y="60" width="50"></img>
            <img src="res/ui/heroBg_O.png" x="78" y="17"></img>
        </img>
        <img src="res/ui/roleBg.png" x="225" @click="openRole(123,321)">
            <img src="res/ui/avatarRole.png" width="80" height="80" x="10" y="10"></img>
            <txt :text="playerName" x="125" y="10" size="20" color="#ffffff"></txt>
            <img src="res/ui/blood.png" x="100" y="37" width="108"></img>
            <img src="res/ui/mana.png" x="100" y="53" width="80"></img>
            <img src="res/ui/exp.png" x="100" y="68" width="50"></img>
        </img>
    </box>
    <box x="-455" y="-65" note="底部按钮">
        <img :src="downBtnRes" x="390" @click="downBtnClick()"></img>
        <box :visible="downBtnVisible" note="展开与收缩">
            <tpl src="tpl/components/button.tpl" icon="res/ui/btnBag.png" @click="openBag()" note="背包"></tpl>
            <tpl src="tpl/components/button.tpl" x="65" icon="res/ui/btnSkill.png" @click="openTeam(1)"></tpl>
            <tpl src="tpl/components/button.tpl" x="130" icon="res/ui/btnUnion.png" @click="openTeam(2)"></tpl>
            <tpl src="tpl/components/button.tpl" x="195" icon="res/ui/btnFriend.png" @click="openTeam(3)"></tpl>
            <tpl src="tpl/components/button.tpl" x="260" icon="res/ui/btnSocial.png" @click="openTeam(4)"></tpl>
            <tpl src="tpl/components/button.tpl" x="325" icon="res/ui/btnSet.png" @click="openTeam(5)"></tpl>
        </box>
    </box>
    <box x="680" y="150" note="测试组件">
        <img src="res/ui/ground5.png" width="100" height="230" grid="25,25,25,25"></img>
        <txt text="测试" x="20" y="20" size="32" color="#ff0000"></txt>
        <tpl src="tpl/components/button.tpl" icon="res/ui/buttonLN.png" x="10" y="80" title="重载1234" audio="res/audio/click.mp3" @click="jumpTpl('loading')"></tpl>
        <tpl src="tpl/components/button.tpl" icon="res/ui/buttonL.png" width="80" height="40" x="10" y="140" title="回合战斗" @click="openTpl('tpl/fight.tpl',null)"></tpl>
    </box>
    <tpl name="hero" src="tpl/hero.tpl" x="100" y="150" :index="heroIndex" :visible="heroVisible" @click="setIndex("hero")"></tpl>
    <tpl name="role" src="tpl/role.tpl" x="450" y="150" :index="roleIndex" :visible="roleVisible" @click="setIndex("role")"></tpl>
    <tpl name="bag" src="tpl/bag.tpl" x="200" y="150" :index="bagIndex" :visible="bagVisible" @click="setIndex("bag")"></tpl>
    <tpl name="tip" src="tpl/tip.tpl" x="801" y="0" index="999" content=""></tpl>
</template>

<script>
data(){
    return {
        playerName: player.role.name,
        mapName: player.role.mapId + " (" + player.role.x + "," + player.role.y + ")",
        leftBtnVisible: true,
        leftBtnRes: "res/ui/btnUp.png",
        downBtnVisible: true,
        downBtnRes: "res/ui/btnRight.png",
        bagVisible: false,
        roleVisible: false,
        heroVisible: false,
        heroIndex: 100,//显示层次 数字越大优先级越高  避免 tip 被遮挡需给他设置更高的
        roleIndex: 101,
        bagIndex: 102
    }
}

create() {
    console.log("ui create");
}

update(delta) {

}

destroyed() {
    
}

setIndex(tpl){//调整UI层级
    console.log('setIndex');
    if(this.heroIndex > 100){
        this.heroIndex--;
    }
    if(this.roleIndex > 100){
        this.roleIndex--;
    }
    if(this.bagIndex > 100){
        this.bagIndex--;
    }
    if(tpl == "hero"){
        this.heroIndex = 103;
    }else if(tpl == "role"){
        this.roleIndex = 103;
    }else if(tpl == "bag"){
        this.bagIndex = 103;
    }
}

openMap(){
    console.log('openMap');
}

openHero(){
    console.log('openHero');
    this.heroVisible = !this.heroVisible;
    this.setIndex("hero");//新开窗口index更高
}

openRole(){
    console.log('openRole');
    this.roleVisible = !this.roleVisible;
    this.setIndex("role");//新开窗口index更高
}

openBag(){
    console.log('openBag');
    //bag.visible = !bag.visible;
    this.bagVisible = !this.bagVisible;
    this.setIndex("bag");//新开窗口index更高
}

openTeam(event){
    console.log('openTeam', event);
}

leftBtnClick(){
    if(this.leftBtnVisible){
        this.leftBtnRes = "res/ui/btnDown.png";
        this.leftBtnVisible = false;
    }else{
        this.leftBtnRes = "res/ui/btnUp.png";
        this.leftBtnVisible = true;
    }
}
downBtnClick(){
    if(this.downBtnVisible){
        this.downBtnRes = "res/ui/btnLeft.png";
        this.downBtnVisible = false;
    }else{
        this.downBtnRes = "res/ui/btnRight.png";
        this.downBtnVisible = true;
    } 
}
</script>